import * as React from "react";
import { Component } from "react";
import HP from "../types/HP";
import HPInfo from "./common/HPInfo";
import { Container } from "@material-ui/core";

export interface BestHPProps {}

class BestHPInfo implements HP {
  name: string;
  discription: string;
  figure: string;
  honor: "年度HP" | "最佳HP" | "终身名誉HP" = "最佳HP";
  constructor(name: string, discription: string, figure: string) {
    this.name = name;
    this.discription = discription;
    this.figure = figure;
  }
}

export interface BestHPProps {}

export interface BestHPState {
  bestHPs: HP[];
}

class BestHP extends React.Component<BestHPProps, BestHPState> {
  state = {
    bestHPs: [
      new BestHPInfo(
        "yqs",
        "yqs，SEU最佳HP称号获得者，湖北九头鸟。提出了一种综合的杀学生方法，是推动计算机科学与技术学院课程改革的重要人物",
        "https://cse.seu.edu.cn/_upload/article/images/47/06/7a65bc6e43889301217afdaa9a72/96c4d71b-35bf-4f9b-b786-b2b99f2c7b50.jpg"
      ),
      new BestHPInfo(
        "rgl",
        "rgl，SEU最佳HP称号获得者，东南大学“百人斩”卫冕冠军。“这个学生不能教，那个学生太蠢了，他们死定了”",
        "https://img14.360buyimg.com/n1/jfs/t15793/145/2005360222/362428/911fdfd0/5a6f4c2fN7680f57a.jpg"
      ),
    ],
  };
  render() {
    return (
      <div className="flex-div">
        {this.state.bestHPs.map((hp: HP) => (
          <div className="m-4">
            <HPInfo
              name={hp.name}
              figure={hp.figure}
              discription={hp.discription}
              honor={hp.honor}
            />
          </div>
        ))}
      </div>
    );
  }
}

export default BestHP;
